<template>
    <div id="Activity">
        <van-swipe :autoplay="3000" indicator-color="white" show-indicators>
            <van-swipe-item v-for="i in 5" :key="i">
                <van-image :src="randomPic" fit="cover"/>
            </van-swipe-item>
        </van-swipe>
        <van-tabs border sticky color="#0cf" title-active-color="#0cf" v-model="active">
            <van-tab title="创业活动">
                <vj-list refresh-cmp :load-more="onActivityLoad.bind(this)">
                    <template #default="{item}">
                        <section @click="$pushRoute({path:'/activity-info',query:{customId:item.id}})" class="c-activity">
                            <van-image fit="cover" class="c-activity__img" :src="item.actbill"/>
                            <div class="c-activity__wrap">
                                <h3 class="c-activity__title">{{item.title}}</h3>
                                <p>活动时间：{{item.actstarttime}}</p>
                                <em>主办方：{{item.sponsor}}</em>
                            </div>
                        </section>
                    </template>
                </vj-list>
            </van-tab>
            <van-tab title="创业大赛">
                <vj-list  :load-more="onCompetitionLoad.bind(this)">
                    <template #default="{item}">
                        <section @click="$pushRoute({path:'/activity-info',query:{customId:item.id}})" class="c-activity">
                            <van-image fit="cover" class="c-activity__img" :src="item.actbill"/>
                            <div class="c-activity__wrap">
                                <h3 class="c-activity__title">{{item.title}}</h3>
                                <p>活动时间：{{item.actstarttime}}</p>
                                <em>主办方：{{item.sponsor}}</em>
                            </div>
                        </section>
                    </template>
                </vj-list>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import VjList from "@/components/vj-list.vue";
    import {asyncSleep} from "vijay-util";
    import {requestByGet} from "@/utils/request";

    let i = 5, j = 2;
    @Component({
        components: {VjList}
    })
    export default class Activity extends Vue implements ComponentOptions<Vue> {
        name = "Activity";
        active = 0;
        async onActivityLoad(pageNo, pageSize) {
            const {records} = await requestByGet(`/qqc/qqcExercise/typeList`, {pageNo, pageSize,type:2});
            return records;
        }
        async onCompetitionLoad(pageNo, pageSize) {
            const {records} = await requestByGet(`/qqc/qqcExercise/typeList`, {pageNo, pageSize,type:1});
            return records;
        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #Activity{
        .c-activity{
            @include alignCenter;
            padding: 8px 0 6px;
            &__img{
                width: 100px;
                height: 67px;
                flex-shrink: 0;
                margin-right: 16px;
            }
            &__wrap{
                line-height: 1.6;
                font-size: 12px;
                color: $p-color;
            }
            &__title{
                line-height: 1.3;
                font-size: 14px;
                color: $strong-clr;
                @include t-overflow(2);
            }
        }
    }
</style>
